<!DOCTYPE html>

<html>
<head>
  <title>pixel.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="analyze.html">
                analyze.coffee
              </a>
            
              
              <a class="source" href="autoload.html">
                autoload.coffee
              </a>
            
              
              <a class="source" href="blender.html">
                blender.coffee
              </a>
            
              
              <a class="source" href="calculate.html">
                calculate.coffee
              </a>
            
              
              <a class="source" href="caman.html">
                caman.coffee
              </a>
            
              
              <a class="source" href="convert.html">
                convert.coffee
              </a>
            
              
              <a class="source" href="event.html">
                event.coffee
              </a>
            
              
              <a class="source" href="filter.html">
                filter.coffee
              </a>
            
              
              <a class="source" href="io.html">
                io.coffee
              </a>
            
              
              <a class="source" href="layer.html">
                layer.coffee
              </a>
            
              
              <a class="source" href="logger.html">
                logger.coffee
              </a>
            
              
              <a class="source" href="module.html">
                module.coffee
              </a>
            
              
              <a class="source" href="pixel.html">
                pixel.coffee
              </a>
            
              
              <a class="source" href="plugin.html">
                plugin.coffee
              </a>
            
              
              <a class="source" href="renderer.html">
                renderer.coffee
              </a>
            
              
              <a class="source" href="store.html">
                store.coffee
              </a>
            
              
              <a class="source" href="util.html">
                util.coffee
              </a>
            
              
              <a class="source" href="blenders.html">
                blenders.coffee
              </a>
            
              
              <a class="source" href="filters.html">
                filters.coffee
              </a>
            
              
              <a class="source" href="size.html">
                size.coffee
              </a>
            
              
              <a class="source" href="blur.html">
                blur.coffee
              </a>
            
              
              <a class="source" href="camera.html">
                camera.coffee
              </a>
            
              
              <a class="source" href="compoundBlur.html">
                compoundBlur.coffee
              </a>
            
              
              <a class="source" href="edges.html">
                edges.coffee
              </a>
            
              
              <a class="source" href="posterize.html">
                posterize.coffee
              </a>
            
              
              <a class="source" href="presets.html">
                presets.coffee
              </a>
            
              
              <a class="source" href="rotate.html">
                rotate.coffee
              </a>
            
              
              <a class="source" href="stackBlur.html">
                stackBlur.coffee
              </a>
            
              
              <a class="source" href="threshold.html">
                threshold.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>pixel.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Represents a single Pixel in an image.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">Caman</span>.<span class="title">Pixel</span></span>
  <span class="property">@coordinatesToLocation</span>: (x, y, width) -&gt;
    (y * width + x) * <span class="number">4</span>

  <span class="property">@locationToCoordinates</span>: (loc, width) -&gt;
    y = Math.floor(loc / (width * <span class="number">4</span>))
    x = (loc % (width * <span class="number">4</span>)) / <span class="number">4</span>

    <span class="keyword">return</span> x: x, y: y

  constructor: (<span class="property">@r</span> = <span class="number">0</span>, <span class="property">@g</span> = <span class="number">0</span>, <span class="property">@b</span> = <span class="number">0</span>, <span class="property">@a</span> = <span class="number">255</span>, <span class="property">@c</span> = <span class="literal">null</span>) -&gt;
    <span class="property">@loc</span> = <span class="number">0</span>

  setContext: (c) -&gt; <span class="property">@c</span> = c</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Retrieves the X, Y location of the current pixel. The origin is at the bottom left corner of 
the image, like a normal coordinate system.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  locationXY: -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?

    y = <span class="property">@c</span>.dimensions.height - Math.floor(<span class="property">@loc</span> / (<span class="property">@c</span>.dimensions.width * <span class="number">4</span>))
    x = (<span class="property">@loc</span> % (<span class="property">@c</span>.dimensions.width * <span class="number">4</span>)) / <span class="number">4</span>

    <span class="keyword">return</span> x: x, y: y

  pixelAtLocation: (loc) -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?

    <span class="keyword">new</span> Pixel(
      <span class="property">@c</span>.pixelData[loc], 
      <span class="property">@c</span>.pixelData[loc + <span class="number">1</span>], 
      <span class="property">@c</span>.pixelData[loc + <span class="number">2</span>], 
      <span class="property">@c</span>.pixelData[loc + <span class="number">3</span>],
      <span class="property">@c</span>
    )</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Returns an RGBA object for a pixel whose location is specified in relation to the current 
pixel.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  getPixelRelative: (horiz, vert) -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>We invert the vert_offset in order to make the coordinate system non-inverted. In laymans
terms: -1 means down and +1 means up.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    newLoc = <span class="property">@loc</span> + (<span class="property">@c</span>.dimensions.width * <span class="number">4</span> * (vert * -<span class="number">1</span>)) + (<span class="number">4</span> * horiz)

    <span class="keyword">if</span> newLoc &gt; <span class="property">@c</span>.pixelData.length <span class="keyword">or</span> newLoc &lt; <span class="number">0</span>
      <span class="keyword">return</span> <span class="keyword">new</span> Pixel(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">255</span>, <span class="property">@c</span>)

    <span class="keyword">return</span> <span class="property">@pixelAtLocation</span>(newLoc)</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>The counterpart to getPixelRelative, this updates the value of a pixel whose location is 
specified in relation to the current pixel.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  putPixelRelative: (horiz, vert, rgba) -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?

    nowLoc = <span class="property">@loc</span> + (<span class="property">@c</span>.dimensions.width * <span class="number">4</span> * (vert * -<span class="number">1</span>)) + (<span class="number">4</span> * horiz)

    <span class="keyword">return</span> <span class="keyword">if</span> newLoc &gt; <span class="property">@c</span>.pixelData.length <span class="keyword">or</span> newLoc &lt; <span class="number">0</span>

    <span class="property">@c</span>.pixelData[newLoc] = rgba.r
    <span class="property">@c</span>.pixelData[newLoc + <span class="number">1</span>] = rgba.g
    <span class="property">@c</span>.pixelData[newLoc + <span class="number">2</span>] = rgba.b
    <span class="property">@c</span>.pixelData[newLoc + <span class="number">3</span>] = rgba.a

    <span class="keyword">return</span> <span class="literal">true</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Gets an RGBA object for an arbitrary pixel in the canvas specified by absolute X, Y coordinates</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  getPixel: (x, y) -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?

    loc = <span class="property">@coordinatesToLocation</span>(x, y, <span class="property">@width</span>)
    <span class="keyword">return</span> <span class="property">@pixelAtLocation</span>(loc)</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Updates the pixel at the given X, Y coordinate</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  putPixel: (x, y, rgba) -&gt;
    <span class="keyword">throw</span> <span class="string">"Requires a CamanJS context"</span> <span class="keyword">unless</span> <span class="property">@c</span>?

    loc = <span class="property">@coordinatesToLocation</span>(x, y, <span class="property">@width</span>)

    <span class="property">@c</span>.pixelData[loc] = rgba.r
    <span class="property">@c</span>.pixelData[loc + <span class="number">1</span>] = rgba.g
    <span class="property">@c</span>.pixelData[loc + <span class="number">2</span>] = rgba.b
    <span class="property">@c</span>.pixelData[loc + <span class="number">3</span>] = rgba.a

  toString: -&gt; <span class="property">@toKey</span>()
  toHex: (includeAlpha = <span class="literal">false</span>) -&gt;
    hex = <span class="string">'#'</span> + 
      <span class="property">@r</span>.toString(<span class="number">16</span>) +
      <span class="property">@g</span>.toString(<span class="number">16</span>) +
      <span class="property">@b</span>.toString(<span class="number">16</span>)

    <span class="keyword">if</span> includeAlpha <span class="keyword">then</span> hex + <span class="property">@a</span>.toString(<span class="number">16</span>) <span class="keyword">else</span> hex

Pixel = Caman.Pixel</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
